<template>
  <div class="w-full h-full" v-if="currentQuestion && currentQuestion.answerScoreable">
    <Stem
      master="homework_todo_question_xkw"
      :index="currentQuestionIndex"
      :data="stem"
      :answer="answer"
      :student-answer="studentAnswer"
      @change-student-answer="changeStudentAnswer"
    />
  </div>
</template>

<script>
import Stem from '@/components/question/stem/index'
import { mapState } from 'vuex'
import { formatQuestionStem, formatQuestionAnswer } from '@/utils/question'

export default {
  components: {
    Stem
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['homework']),
    currentQuestionIndex() {
      const { currentHomework = {} } = this.homework
      const { questionIndex } = currentHomework
      return questionIndex
    },
    currentQuestion() {
      const { currentHomework = {} } = this.homework
      const { questions, questionIndex } = currentHomework
      return questions[questionIndex]
    },
    stem() {
      const {
        questionSplit: { stem },
        typeName
      } = this.currentQuestion

      const { type } = stem

      return formatQuestionStem(stem, {
        label: typeName,
        type
      })
    },
    answer() {
      const {
        questionSplit: { answer }
      } = this.currentQuestion

      try {
        return formatQuestionAnswer(answer)
      } catch (error) {
        return ''
      }
    },
    studentAnswer() {
      const {
        localStudentAnswer: { studentAnswer }
      } = this.currentQuestion
      return studentAnswer
    }
  },
  mounted() {},
  methods: {
    changeStudentAnswer({ answer = {}, status = 0, canNext = false }) {
      const { localStudentAnswer } = this.currentQuestion
      localStudentAnswer.studentAnswer = answer
      this.currentQuestion.localStudentAnswerStatus = status
      canNext && this.$emit('choose')
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .bg-30C9A1-10 {
  background-color: rgba($color: #51c3ff, $alpha: 0.2);
}
</style>
